// 初始化粒子背景
particlesJS('particles-js', {
  particles: {
    number: {
      value: 80,
      density: {
        enable: true,
        value_area: 800
      }
    },
    color: {
      value: ['#00e5ff', '#ff006e', '#ffffff']
    },
    shape: {
      type: 'circle'
    },
    opacity: {
      value: 0.5,
      random: true,
      anim: {
        enable: true,
        speed: 1,
        opacity_min: 0.1,
        sync: false
      }
    },
    size: {
      value: 3,
      random: true,
      anim: {
        enable: true,
        speed: 2,
        size_min: 0.1,
        sync: false
      }
    },
    line_linked: {
      enable: true,
      distance: 150,
      color: '#00e5ff',
      opacity: 0.4,
      width: 1
    },
    move: {
      enable: true,
      speed: 2,
      direction: 'none',
      random: false,
      straight: false,
      out_mode: 'out',
      bounce: false,
      attract: {
        enable: false,
        rotateX: 600,
        rotateY: 1200
      }
    }
  },
  interactivity: {
    detect_on: 'canvas',
    events: {
      onhover: {
        enable: true,
        mode: 'repulse'
      },
      onclick: {
        enable: true,
        mode: 'push'
      },
      resize: true
    },
    modes: {
      repulse: {
        distance: 100,
        duration: 0.4
      },
      push: {
        particles_nb: 4
      }
    }
  },
  retina_detect: true
});

// GSAP 动画注册插件
gsap.registerPlugin(ScrollTrigger);

// 导航点交互
const dots = document.querySelectorAll('.dot');
const sections = document.querySelectorAll('.section');

dots.forEach((dot, index) => {
  dot.addEventListener('click', () => {
    sections[index].scrollIntoView({ behavior: 'smooth' });
  });
});

// 监听滚动更新导航点
window.addEventListener('scroll', () => {
  let current = 0;
  sections.forEach((section, index) => {
    const rect = section.getBoundingClientRect();
    if (rect.top <= window.innerHeight / 2 && rect.bottom >= window.innerHeight / 2) {
      current = index;
    }
  });

  dots.forEach((dot, index) => {
    dot.classList.toggle('active', index === current);
  });
});

// 标题渐变动画
gsap.to('.gradient-text', {
  backgroundPosition: '200% center',
  duration: 3,
  repeat: -1,
  ease: 'power2.inOut'
});

// 章节进入动画
sections.forEach((section, index) => {
  const elements = section.querySelectorAll('.content > *');

  gsap.timeline({
    scrollTrigger: {
      trigger: section,
      start: 'top 80%',
      end: 'top 20%',
      toggleActions: 'play none none reverse'
    }
  })
    .from(elements, {
      y: 50,
      opacity: 0,
      duration: 0.8,
      stagger: 0.2,
      ease: 'power3.out'
    });
});

// 3D镜头旋转增强
gsap.to('.lens-3d', {
  rotationY: 360,
  duration: 20,
  repeat: -1,
  ease: 'none'
});

// 性能卡片悬浮效果
const specCards = document.querySelectorAll('.spec-card');
specCards.forEach(card => {
  card.addEventListener('mouseenter', () => {
    gsap.to(card, {
      y: -10,
      duration: 0.3,
      ease: 'power2.out'
    });
  });

  card.addEventListener('mouseleave', () => {
    gsap.to(card, {
      y: 0,
      duration: 0.3,
      ease: 'power2.out'
    });
  });
});

// 镜头图标动画
const lensItems = document.querySelectorAll('.lens-item');
lensItems.forEach((item, index) => {
  gsap.from(item, {
    scale: 0,
    opacity: 0,
    duration: 0.6,
    delay: index * 0.1,
    ease: 'back.out(1.7)',
    scrollTrigger: {
      trigger: '.lens-gallery',
      start: 'top 70%'
    }
  });
});

// 数字动画
function animateNumber (element, start, end, duration) {
  const obj = { value: start };
  gsap.to(obj, {
    value: end,
    duration: duration,
    ease: 'power2.out',
    onUpdate: () => {
      element.textContent = Math.round(obj.value);
    },
    scrollTrigger: {
      trigger: element,
      start: 'top 80%',
      once: true
    }
  });
}

// 动画化大数字
const bigNumber = document.querySelector('.big-number');
if (bigNumber) {
  animateNumber(bigNumber, 0, 990, 2);
}

// 电池充电动画
gsap.to('.battery-level', {
  height: '80%',
  duration: 2,
  repeat: -1,
  yoyo: true,
  ease: 'power2.inOut'
});

// 手机模型3D旋转
const phoneModel = document.querySelector('.phone-model');
if (phoneModel) {
  gsap.to(phoneModel, {
    rotationY: 360,
    duration: 20,
    repeat: -1,
    ease: 'none'
  });
}

// 用户照片墙
const marqueeContent = document.querySelector('.marquee-content');
if (marqueeContent) {
  // 模拟用户照片（实际项目中替换为真实图片）
  const photos = [
    'https://picsum.photos/400/300?random=1',
    'https://picsum.photos/400/300?random=2',
    'https://picsum.photos/400/300?random=3',
    'https://picsum.photos/400/300?random=4',
    'https://picsum.photos/400/300?random=5',
    'https://picsum.photos/400/300?random=6'
  ];

  // 创建两组照片以实现无缝滚动
  photos.concat(photos).forEach(src => {
    const img = document.createElement('img');
    img.src = src;
    img.alt = 'User Photo';
    marqueeContent.appendChild(img);
  });
}

// 价格卡片动画
const priceCards = document.querySelectorAll('.price-card');
priceCards.forEach((card, index) => {
  gsap.from(card, {
    y: 50,
    opacity: 0,
    duration: 0.8,
    delay: index * 0.2,
    ease: 'power3.out',
    scrollTrigger: {
      trigger: '.price-cards',
      start: 'top 70%'
    }
  });
});

// 技术规格表展开/收起
const specToggle = document.getElementById('specToggle');
const specTable = document.getElementById('specTable');

specToggle.addEventListener('click', () => {
  specTable.classList.toggle('show');
  specToggle.classList.toggle('active');
});

// 镜头悬浮光效
lensItems.forEach(item => {
  const icon = item.querySelector('.lens-icon');

  item.addEventListener('mouseenter', () => {
    gsap.to(icon, {
      boxShadow: '0 0 30px rgba(0, 229, 255, 0.8)',
      scale: 1.1,
      duration: 0.3
    });
  });

  item.addEventListener('mouseleave', () => {
    gsap.to(icon, {
      boxShadow: 'none',
      scale: 1,
      duration: 0.3
    });
  });
});

// 文字打字机效果
function typeWriter (element, text, speed = 50) {
  let i = 0;
  element.textContent = '';

  function type () {
    if (i < text.length) {
      element.textContent += text.charAt(i);
      i++;
      setTimeout(type, speed);
    }
  }

  ScrollTrigger.create({
    trigger: element,
    start: 'top 80%',
    once: true,
    onEnter: type
  });
}

// 应用打字机效果到引言
const quote = document.querySelector('blockquote');
if (quote) {
  const originalText = quote.textContent;
  typeWriter(quote, originalText.trim(), 100);
}

// 性能监控动画
const performanceSection = document.querySelector('.performance-section');
if (performanceSection) {
  ScrollTrigger.create({
    trigger: performanceSection,
    start: 'top 50%',
    onEnter: () => {
      // CPU核心动画
      gsap.to('.cpu-core::before', {
        rotation: 360,
        duration: 3,
        repeat: -1,
        ease: 'none'
      });

      // 屏幕反光动画
      gsap.to('.screen-shine', {
        x: '200%',
        y: '200%',
        duration: 3,
        repeat: -1,
        ease: 'power2.inOut'
      });
    }
  });
}

// 购买按钮波纹效果
document.querySelectorAll('.buy-btn').forEach(btn => {
  btn.addEventListener('click', function (e) {
    const ripple = document.createElement('span');
    const rect = this.getBoundingClientRect();
    const size = Math.max(rect.width, rect.height);
    const x = e.clientX - rect.left - size / 2;
    const y = e.clientY - rect.top - size / 2;

    ripple.style.width = ripple.style.height = size + 'px';
    ripple.style.left = x + 'px';
    ripple.style.top = y + 'px';
    ripple.classList.add('ripple');

    this.appendChild(ripple);

    setTimeout(() => ripple.remove(), 600);
  });
});

// 添加波纹样式
const style = document.createElement('style');
style.textContent = `
  .buy-btn {
      position: relative;
      overflow: hidden;
  }
  .ripple {
      position: absolute;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.5);
      transform: scale(0);
      animation: ripple-animation 0.6s ease-out;
  }
  @keyframes ripple-animation {
      to {
          transform: scale(4);
          opacity: 0;
      }
  }
`;
document.head.appendChild(style);

// 页面加载完成后的初始动画
window.addEventListener('load', () => {
  gsap.from('.main-title', {
    y: -50,
    opacity: 0,
    duration: 1,
    delay: 0.5,
    ease: 'power3.out'
  });
});

// 滚动提示
const scrollHint = document.createElement('div');
scrollHint.className = 'scroll-hint';
scrollHint.innerHTML = '<span>向下滚动</span><div class="scroll-arrow"></div>';
document.querySelector('.camera-section').appendChild(scrollHint);

// 添加滚动提示样式
const scrollStyle = document.createElement('style');
scrollStyle.textContent = `
  .scroll-hint {
      position: absolute;
      bottom: 30px;
      left: 50%;
      transform: translateX(-50%);
      text-align: center;
      opacity: 0.7;
  }
  .scroll-arrow {
      width: 30px;
      height: 30px;
      margin: 10px auto;
      border-right: 2px solid #fff;
      border-bottom: 2px solid #fff;
      transform: rotate(45deg);
      animation: scroll-bounce 2s infinite;
  }
  @keyframes scroll-bounce {
      0%, 20%, 50%, 80%, 100% {
          transform: rotate(45deg) translate(0, 0);
      }
      40% {
          transform: rotate(45deg) translate(0, 10px);
      }
      60% {
          transform: rotate(45deg) translate(0, 5px);
      }
  }
`;
document.head.appendChild(scrollStyle);

// 隐藏滚动提示
window.addEventListener('scroll', () => {
  if (window.scrollY > 100) {
    gsap.to('.scroll-hint', {
      opacity: 0,
      duration: 0.3
    });
  }
});

console.log('Nubia Z70 展示页面已加载完成！');